<template>
<!-- 主页组件 通过路由访问 -->
    <div class="home">
        <!-- 公共头部 -->
        <heads-com></heads-com>
            <div v-if="!$store.state.searchChecked">
                <search></search>
            </div>

        <div v-if="$store.state.searchChecked">
        <!-- 轮播图 -->
        <banner-com></banner-com>

            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <!-- 活动 -->
            <div class="huodong">
                <img src="//m.360buyimg.com/mobilecms/s750x200_jfs/t1/143152/12/8025/114847/5f58d761Ec4095d9a/25be24cb6024c060.png.webp" alt="">
            </div>
            <!-- 导航 -->

                <div class="nav_warp">
                    <ul>
                        <li v-for="(item,index) in navList" :key="index">
                            <!-- <img src="" alt=""> -->
                            <p>{{item.category_cn}}</p>
                        </li>
                    </ul>
                </div>
                <!-- 京东秒杀 -->
                <seckill></seckill>
                <!-- 推荐 -->
                <recommend></recommend>
            </van-pull-refresh>
        </div>

    </div>
</template>

<script>
// 引入公共头部组件
import headsCom from "../../components/head.vue"
import seckill from "../../components/commom/seckill"
import recommend from "../../components/commom/recommend"
import search from "../catetory/components/search"
// 引入轮播图组件
import bannerCom from "./banner/index"
// 引入封装的axios 获取导航接口
import {getNavs} from "../../api/home"
// import {getRecommend} from "../../api/common"
export default {
    name:'my',
    data() {
        return {
            navList:[],//导航列表，
            isLoading:false
        }
    },
    methods: {
        onRefresh(){
                this.$store.dispatch("homeStore/getrecommend",1,true).then(()=>{
                    this.isLoading = false
                })
        }
    },
    components:{
        // 挂载组件
        headsCom,
        bannerCom,
        seckill,
        recommend,
        search
    },
    created() {
        // 调用获取导航接口 并将获取到的数据存储到本地
        getNavs().then(res=>{
            // console.log("navList---",res)
            this.navList = res.result.data
        })
    },
}
</script>

<style lang="less" scoped>
.home{
    width: 100%;
}
.huodong{
    width: 100%;
    margin-top: 100px;
    img{
        width: 100%;
    }
}
.nav_warp{
    margin-top: 30px;
    height: 150px;
    width: 100%;
    ul{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        li{
            width: 150px;
            height: 140px;
        }
    }
}
</style>